import { ConnectButton } from '@rainbow-me/rainbowkit'
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Card, Row, Col, Button, Typography, Modal } from 'antd'
import { useState } from 'react'

const { Title } = Typography

const Home = () => {
  const [isTicketModalOpen, setIsTicketModalOpen] = useState(false)
  const [isCouponModalOpen, setIsCouponModalOpen] = useState(false)

  const openTicketDetail = () => {
    setIsTicketModalOpen(true)
  }

  const openCouponDetail = () => {
    setIsCouponModalOpen(true)
  }

  return (
    <>
      <Head>
        <title>RainbowKit App</title>
        <meta content="Generated by @rainbow-me/create-rainbowkit" name="description" />
        <link href="/favicon.ico" rel="icon" />
      </Head>

      <main className={styles.main}>
        <Title>Ed3 Miles&More 星享计划</Title>
        <ConnectButton />
        <Row gutter={[20, 20]} style={{ width: 600, marginTop: 20 }}>
          <Col span={24}>
            <Card title="机票价格">0 MATIC</Card>
          </Col>
          <Col span={12}>
            <Card
              title="已购机票"
              extra={
                <Button type="link" onClick={openTicketDetail}>
                  详情
                </Button>
              }
            >
              0 张
            </Card>
          </Col>
          <Col span={12}>
            <Card title="剩余机票">0 张</Card>
          </Col>
          <Col span={12}>
            <Card title="我的积分">0</Card>
          </Col>
          <Col span={12}>
            <Card
              title="我的优惠券"
              extra={
                <Button type="link" onClick={openCouponDetail}>
                  详情
                </Button>
              }
            >
              0 张
            </Card>
          </Col>
          <Col span={24}>
            <Button type="primary" block>
              购买机票
            </Button>
          </Col>
          <Col span={24}>
            <Button block>兑换优惠券</Button>
          </Col>
        </Row>
        <Modal title="我的机票" footer={null} open={isTicketModalOpen} onCancel={() => setIsTicketModalOpen(false)}>
          <Row gutter={[20, 20]}>
            <Col span={12}>
              <Card hoverable>
                <Card.Meta title="Ticket#0" description="Ticket" />
              </Card>
            </Col>
          </Row>
        </Modal>
        <Modal title="我的优惠券" footer={null} open={isCouponModalOpen} onCancel={() => setIsCouponModalOpen(false)}>
          <Row gutter={[20, 20]}>
            <Col span={12}>
              <Card hoverable>
                <Card.Meta title="Coupon#0" description="Coupon" />
              </Card>
            </Col>
          </Row>
        </Modal>
      </main>
    </>
  )
}

export default Home
